<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="案件号" prop="case_number">
        <el-input
          v-model="queryParams.case_number"
          placeholder="请输入案件号"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="派休单位" prop="maintenancer_name">
        <el-input
          v-model="queryParams.maintenancer_name"
          placeholder="请输入派休单位"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="维修是否超时" prop="is_overtime">
        <el-select
          v-model="queryParams.is_overtime"
          placeholder="请选择是否超时"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in overList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="维修完成时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 220px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:serviceManagement:add']"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="serviceList" height="600">
      <!-- <el-table-column width="55" align="center" /> -->
      <el-table-column label="主键id" align="center" prop="id" v-if="false" />
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="案件号" width="120px" align="center" prop="case_number" />
      <el-table-column label="派休单位" align="center" prop="maintenancer_name"/>
      <el-table-column label="维修勘验跟踪记录" align="center" prop="maintenance_record" />
      <el-table-column label="维修是否超时" align="center" prop="is_overtime">
        <template slot-scope="scope">
          {{
            scope.row.is_overtime === 0
              ? "否"
              : scope.row.is_overtime === 1
              ? "是"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="维修完成时间" align="center" prop="finish_time" />
      <el-table-column label="垫支人" align="center" prop="supporter" />
      <el-table-column label="垫支金额" align="center" prop="support_cost" />
      <el-table-column label="垫支时间" align="center" prop="support_time" />
      <el-table-column label="维修清单预算" align="center" prop="maintenance_budget" />
      <el-table-column label="实际维修清单诀算" align="center" prop="maintenance_final_accounts" />
      <el-table-column label="维修收款信息" align="center" prop="maintenance_payment" />
      <el-table-column label="专票金额" align="center" prop="special_ticket_amount" />
      <el-table-column label="税率" align="center" prop="tax_rate">
        <template slot-scope="scope">
          {{ scope.row.tax_rate !== null ? scope.row.tax_rate + "%" : "暂无" }}
       </template>
      </el-table-column> 
      <el-table-column label="普票金额" align="center" prop="general_ticket_amount" />
      <el-table-column label="合计成本票金额" align="center" prop="total_invoice_amount" />
      <el-table-column label="缺票金额" align="center" prop="missing_ticket_amount" />
      <el-table-column label="尾款结算金额" align="center" prop="final_payment" />
      <el-table-column label="尾款汇款时间" align="center" prop="final_payment_time" />
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="130px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetails(scope.row)"
            v-hasPermi="['system:serviceManagement:edit']"
            >上传现场图片</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:serviceManagement:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:serviceManagement:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <edit
      :visible="editVisible"
      :formData="editData"
      :isEdit="isEdit"
      @onClose="editClose"
      @onEnter="editEnter"
      ref="editRef"
    />
    <detailsEdit
      :detailsVisible="detailsVisible"
      :formData="detailsData"
      :imgData="imgData"
      @onClose="detailsClose"
      @onEnter="detailsEnter"
      ref="detailsRef"
    />
  </div>
</template>
<script>
import Edit from "./Edit";
import detailsEdit from "./detailsEdit";
import {
  serviceManagementList,
  addServiceManagement,
  updateServiceManagement,
  deleteServiceManagement,
  getMaintenanceImg,
  updateSurveyExamine
} from "@/api/system/serviceManage";
export default {
  components: { Edit, detailsEdit },
  props: [],
  data() {
    return {
      editVisible: false,
      detailsVisible: false,
      editData: {},
      detailsData: {},
      imgData: {},
      isEdit: false,
      showSearch: true,
      loading: true,
      serviceList: [],
      total: 0,
      queryParams: {
        case_number: undefined,
        maintenancer_name: undefined,
        is_overtime: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      dateRange: [],
      overList: [
        { label: "是", value: 1 },
        { label: "否", value: 0 },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    // confirmAuditing(e) {
    //   updateSurveyExamine({
    //       id: e.id,
    //       status: 3,
    //       case_number: e.case_number
    //     }).then((response) => {
    //       this.$modal.msgSuccess("操作成功");
    //       this.getList();
    //     });
    // },
    // cancelAuditing(e) {
    //   updateSurveyExamine({
    //       id: e.id,
    //       status: 1,
    //       case_number: e.case_number
    //     }).then((response) => {
    //       this.$modal.msgSuccess("操作成功");
    //       this.getList();
    //     });
    // },
    handleAdd() {
      this.$refs.editRef.form = {};
      this.isEdit = false;
      this.editData = {
        is_overtime: 0
      };
      this.$refs.editRef.editType = false;
      this.editVisible = true;
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList() {
      this.loading = true;
      serviceManagementList(this.addDateRange(this.queryParams, this.dateRange)).then(
        (res) => {
          this.serviceList = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      );
    },
    editEnter(e) {
      console.log(e, "DDDDDDDDDDDDDDDD");
      if (e.id) {
        updateServiceManagement(e).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.editVisible = false;
          this.getList();
        });
      } else {
        addServiceManagement(e).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.editVisible = false;
          this.getList();
        });
      }
    },
    editClose() {
      this.editVisible = false;
    },
    handleDetails(e) {
      getMaintenanceImg({ case_number: e.case_number }).then((res) => {
        this.imgData = res.data;
      });
      this.$refs.detailsRef.newImages = [];
      this.$refs.detailsRef.imagesToRemove = [];
      this.detailsData = { ...e };
      this.detailsVisible = true;
    },
    detailsClose() {
      this.detailsVisible = false;
    },
    detailsEnter() {
      this.detailsVisible = false;
    },
    handleUpdate(e) {
      this.isEdit = true;
      this.editData = { ...e };
      this.$refs.editRef.editType = true;
      this.editVisible = true;
    },
    handleDelete(e) {
      this.$modal
        .confirm('是否确认删除案件号为"' + e.case_number + '"的数据项？')
        .then(function () {
          return deleteServiceManagement({ id: e.id });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style>
.el-link [class*=el-icon-] + span {
  margin-left: 0px;
}
</style>
